<template>
  <div>
    <iframe src="http://112.74.46.60:8001/XiaoZhiRobot/chating" frameborder="0" height="600" width="100%"></iframe>
    <!-- <table style="width:60%; margin-left: 20%;">
      <thead>
        <tr>
          <td colspan="2">
            <table style="width:100%; border: 1px solid silver;">
              <tr v-for="item in list" :key=item.id>
                <td style="width:100px; text-align: right">
                  <div v-text="item.name" v-show="item.type == 1"></div>
                  <div v-text="item.date" v-show="item.type == 1"></div>
                </td>
                <td>
                  <span v-text="item.content"></span>
                </td>
                <td style="width:100px;">
                  <div v-text="item.name" v-show="item.type == 2"></div>
                  <div v-text="item.date" v-show="item.type == 2"></div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <textarea style="width:100%;" v-model="txt_send"></textarea>
          </td>
          <td style="width:100px;">
            <button type="button" @click="onSend">提交</button>
          </td>
        </tr>
      </tbody>
    </table> -->
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  mounted () {
  },
  data () {
    return {
      list: [
        { id: 1, name: '张三', content: 'hhelel', date: '14:00:01', type: 1 },
        { id: 2, name: '李四', content: 'aaaaa', date: '14:00:02', type: 2 },
        { id: 3, name: '张三', content: 'bbbb', date: '14:00:03', type: 1 }
      ],
      txt_send: ''
    }
  },
  methods: {
    onSend () {
      if (!this.txt_send) {
        alert('请录入相关的内容')
      } else {
        // var url = `http://112.74.46.60:8001/XiaoZhiRobot/function/getResponse?method=web&input=${this.txt_send}&userid=id0001&username=peter`
        var url = `http://112.74.46.60:8001/XiaoZhiRobot/function/getResponse`
        $.ajax({
          type: 'GET',
          url: url,
          data: { 'input': this.txt_send, 'method': 'Post', 'userid': 'web', 'username': 'web' },
          // dataType: 'json',
          // headers: { 'Access-Control-Allow-Origin': '*' },
          success: function (data) {
            console.log(data)
          }
        })
        // $.getJSON(url, {}, function (data) {
        //   console.log(data)
        // })
        // this.$http.get(url)
        //   .then(function (response) {
        //     console.log(response)
        //   })
        //   .catch(function (error) {
        //     console.log(error)
        //   })
        // $.ajax({
        //   type: 'get',//请求方式
        //   url: '/XiaoZhiRobot/function/getResponse',//请求地址
        //   data: { 'input':this.txt_send,'method':'Post','userid':'web','username':'web' },//传递给controller的json数据
        //   error: function () {
        //       alert('出现错误，请重试！')
        //   },
        //   success: function (data) { //返回成功执行回调函数。
        //       // var json = eval(data); //数组
        //       // var reply = json.show;
        //       // //根据是否带有链接决定是否显示
        //       // if (json.eventid=="知识直接回答"&&json.var2!=undefined){
        //       //   reply += json.var2;
        //       // }
        //       // //根据附加选项进行输出
        //       // for (var i=0;i<json.var1.length;i++){
        //       //   reply += '<br>' + (i+1)+"." + json.var1[i];
        //       // }
        //       // showMessage("小智机器人", reply, false)
        //   }
        // })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
